<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 500px;"></div>
    <script>
        var Myecharts = echarts.init(document.getElementById("main"));
        
        var baseValue = Math.random() * 1000;
        var xAxis_data = [];
        var valueData = [];
        var valueDatas = [];

        function next(idx) {
            smallBaseValue = idx % 30 === 0
                ? Math.random() * 700
                : (smallBaseValue + Math.random() * 500 - 250);
            baseValue += Math.random() * 20 - 10;
            return Math.max(
                0,
                Math.round(baseValue + smallBaseValue) + 3000
            );
        }
        for (var i = 0; i < 100; i++) {
            xAxis_data.push(i+1);
            valueData.push(next(i).toFixed(2));
            valueDatas.push(next(i).toFixed(2));
        }


        // console.log(xAxis_data);
        // console.log(valueData);
        var option = {
            
            
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: 90
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }],
            xAxis: {
                data: xAxis_data,
                silent: false,
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                }
            },
            series: [{
                // name:'直接访问',
                data:valueData,
                type: 'bar',
                areaStyle:{normal:{}},
                smooth:true,
                stack:"总量",
                large: true
            },
            {
                // name:'直接访问',
                data:valueDatas,
                type: 'line',
                areaStyle:{normal:{}},
                // smooth:true,
                stack:"总量",
                large: true
            }],
        };


        //    渲染图表
        Myecharts.setOption(option);
    </script>
</body>
</html>